<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <div style="text-align: right;margin-bottom:20px">
        <el-button type="primary" @click="hAdd(1,'0')">添加权限</el-button>
        </div>
    <el-table
      row-key='id'
      border
      :data="permissions"
      style="width: 100%">
      <el-table-column
      prop="name"
      label="名称">
      </el-table-column>
      <el-table-column
      prop="code"
        label="标识">
      </el-table-column>
      <el-table-column
      prop="description"
        label="描述">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot="{row}">
          <el-button v-if="row.type===1" type="text" @click="hAdd(2,row.id)">添加</el-button>
          <el-button type="text" @click="hEidt(row.id)">编辑</el-button>
          <el-button type="text" @click="hDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </el-card>
    <el-dialog
      :title="isEidt?'编辑':'添加'"
      :visible.sync="dialogVisible"
      @closed="resetForm"
      >
        <el-form :model="form" label-width="100px" ref="refform">
    <el-form-item label="权限名称" >
      <el-input v-model="form.name"/>
    </el-form-item>
        <el-form-item label="权限标识" >
      <el-input v-model="form.code"/>
    </el-form-item>
        <el-form-item label="权限描述" >
      <el-input v-model="form.description"/>
    </el-form-item>
    <el-form-item label="权限启用" >
    <el-switch
  v-model="form.enVisible"
  active-text="启用"
  inactive-text="不启用">
</el-switch>
    </el-form-item>
    <div style="text-align: right">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="hUpdate">确 定</el-button>
    </div>
    </el-form>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import { getpermission,Addpermission,Deletepermission,getpermissionDetail, updatePermission } from '@/api/permissions'
import { tranListToTreeData } from '@/utils'
export default {
  name:'Permissions',
  data(){
    return{
      permissions:[],
      form:{
        code:'',
        description:'',
        enVisible:'',
        name:'',
        pid:'',
        type:''
      },
    dialogVisible:false,
    isEidt:false
    }
  },
  created(){
    this.loadpermissions()
  },
  methods:{
    //获取所有权限点
 async loadpermissions(){
    const res = await  getpermission()
    console.log('获取权限点是',res.data);
    this.permissions = tranListToTreeData(res.data)
    },
    hAdd(type,pid){
      this.isEidt=false
    this.dialogVisible=true
    this.form.type=type
    this.form.pid=pid
    },
    //添加权限点
    async hUpdate(){
      //判断是添加还是编辑
      let res = null
      if(this.isEidt){
        //编辑
      res = await  updatePermission(this.form)
      }else{
        //添加
      res = await  Addpermission(this.form)
      }
    console.log('添加',res.data);
    try{
    this.$message.success(res.message)
    this.loadpermissions()
    this.dialogVisible=false
    }catch(e){
      this.$message.error(e.message)
    }
    },
    //删除权限点
  async  hDel(id){
      await this.$confirm('确定要删除吗?', '提示', { type: 'warning' })
      try{
    const res =await  Deletepermission(id)
    this.$message.success(res.message)
    this.loadpermissions()
      }catch(e){
        this.$message.error(e.message)
      }
    },
  async  hEidt(id){
      this.isEidt=true
      this.dialogVisible=true
      const res = await  getpermissionDetail(id)
      console.log('编辑',res.data);
      this.form=res.data
    },
    resetForm(){
      this.form={
        code:'',
        description:'',
        enVisible:'',
        name:'',
        pid:'',
        type:''
      }
    }
  }
}
</script>
<style lang="">
 
</style>